<template>
  <view>
    <view
      class="m-nav"
      :style="{
        '--position': position,
        '--bg': bg,
        '--color': color,
        '--nav-top': (navTop || navRect.top) + 'px',
        '--padding-right': navRect.paddingRight + 'px',
        '--nav-height': navRect.height + 'px'
      }"
    >
      <view class="nav">
        <view class="left">
					<image v-if="!hideBack" class="icon-left" src="/static/image/navbar/back.png" mode="widthFix" @click="back"></image>
          <!-- #ifndef APP -->
          <slot v-if="$slots.left" name="left" />
          <!-- #endif -->
          <!-- #ifdef APP -->
          <slot name="left" />
          <!-- #endif -->
        </view>
        <view class="center">
          <text v-if="title" class="title">{{ title }}</text>
          <slot v-if="$slots.center" name="center" />
        </view>
        <view class="right">
          <!-- #ifndef APP -->
          <slot v-if="$slots.right" name="right" />
          <!-- #endif -->

          <!-- #ifdef APP -->
          <slot name="right" />
          <!-- #endif -->
        </view>
      </view>
    </view>
    <view v-if="showPlaceholder" class="placeholder" :style="{ height: totalHeight + 'px' }"></view>
  </view>
</template>

<script>
  export default {
    props: {
      navHeight: Number,
      title: String,
      position: {
        type: String,
        default: 'fixed'
      },
      bg: {
        type: String,
        default: '#fff'
      },
      color: {
        type: String,
        default: '#000'
      },
      hideBack: {
        type: Boolean,
        default: false
      },
      navTop: {
        type: [Number, String],
        default: 0
      },
      showPlaceholder: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        totalHeight: 0,
        navRect: {
          top: 0
        }
      }
    },
    created() {
      this.navRect = this.getNavRect()
      this.navRect.paddingRight += this.navRect.width || 0

      // 导航距离顶部距离
      // #ifdef MP-WEIXIN
      this.totalHeight = this.navRect.top + this.navRect.height + 6
      // #endif

      // #ifndef MP-WEIXIN
      this.totalHeight = this.navRect.top + this.navRect.height
      // #endif

      this.$emit('update:navHeight', this.navRect.top + this.navRect.height + 6)
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      getNavRect() {
        let navRect = {
          top: 0,
          height: 42,
          paddingRight: 10
        }
        // #ifdef MP-WEIXIN
        Object.assign(navRect, uni.getMenuButtonBoundingClientRect())
        // #endif

        // #ifdef APP
        Object.assign(navRect, {
          left: 0,
          width: 0,
          top: uni.getSystemInfoSync().safeArea.top
        })
        // #endif

        return navRect
      }
    }
  }
</script>

<style lang="scss" scoped>
  .m-nav {
    position: var(--position);
    top: 0;
    left: 0;
    right: 0;
		display: flex;
		align-items: center;
    color: var(--color);
    width: 100vw;
    padding-top: var(--nav-top);
    background: var(--bg);
    z-index: 9999;
    // #ifdef MP-WEIXIN
    padding-bottom: 6px;
    // #endif
    .nav {
      flex: 1;
			display: flex;
			align-items: center;
      justify-content: space-between;
      position: relative;
      padding: 0 10px;
      padding-right: var(--padding-right);
      height: var(--nav-height);
      .left {
				display: flex;
				align-items: center;
        .icon-left {
					width: 24rpx;
        }
      }
      .center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .title {
          font-size: 34rpx;
          color: var(--color);
        }
      }
      .right {
				display: flex;
				align-items: center;
        padding-right: 10rpx;
      }
    }
  }
</style>
